<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport"
				content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>全国青少年电子信息智能创新大赛</title>
	<link rel="icon" href="./images/logo.png">
	<link rel="stylesheet" href="./lib/layui/css/layui.css">
	<link rel="stylesheet" href="./css/team.css">
	<link rel="stylesheet" href="./lib/layui/css/modules/layer/default/layer.css">
	<script src="./lib/layui/layui.js"></script>
	<script src="./lib/layui/lay/modules/layer.js"></script>
</head>
<body>
<section class="wrapper" v-cloak>
	<common-header></common-header>
	<section class="content">
		<section class="breadcrumb">
			<img src="./images/loc.png" alt="">
			<section>
				赛项 > <a href="./game-details.html">参赛详情</a> > 组队
			</section>
		</section>
		<section class="title">组队申请</section>
		<section class="team-content">
			<section class="steps">
				<section class="step-item" :class="setStepItemClass(1)">
					<section class="step-number">
						<span>1</span>
						<img class="icon" src="./images/icons/step-success-white.png" alt="">
					</section>
					选择赛区
				</section>
				<section class="line"></section>
				<section class="step-item" :class="setStepItemClass(2)">
					<section class="step-number">
						<span>2</span>
						<img class="icon" src="./images/icons/step-success-white.png" alt="">
					</section>
					组队中
				</section>
				<section class="line"></section>
				<section class="step-item" :class="setStepItemClass(3)">
					<section class="step-number">
						<span>3</span>
						<img class="icon" src="./images/icons/step-success-white.png" alt="">
					</section>
					组队完成
				</section>
			</section>
			<section class="steps-content">
				<section v-show="currStep === 1" class="step-item step-one">
					<form class="form layui-form" lay-filter="areaForm" @submit.prevent>
						<section class="layui-form-item">
							<label class="label">
							<span class="label-text">
								<span class="required">*</span>
								赛区
							</span>
								<span class="input-wrapper layui-input-block">
								<select name="gameArea" lay-verify="required" lay-reqtext="请选择赛区">
									<option value="">请选择</option>
									<option v-for="item in zoneList" :value="item.id">{{ item.zoneName }}</option>
								</select>
							</span>
							</label>
						</section>
						<section class="layui-form-item">
							<label class="label">
							<span class="label-text">
								<span class="required">*</span>
								组别
							</span>
								<span class="input-wrapper">
								<select name="gameType" lay-verify="required" lay-reqtext="请选择组别">
									<option value=""></option>
									<option v-for="item in gradeList" :value="item.id">{{ item.gradeName }}</option>
								</select>
							</span>
							</label>
						</section>
						<section v-if="isMulti" class="layui-form-item">
							<label class="label">
								<span class="label-text">
									团队名称
								</span>
								<span class="full input-wrapper layui-input-block">
									<input autocomplete="off" name="teamName" type="text" placeholder="请输入团队名称">
								</span>
							</label>
						</section>
						<button ref="gameArea" style="display: none" type="submit" lay-submit="" lay-filter="chooseGameArea"></button>
					</form>
				</section>
				<section v-show="currStep === 2" class="step-item step-two">
					<section class="title">
						邀请组队
						<section style="display: flex; align-items: center">
							<a v-if="teamInfo && isLeader"  href="javascript:;" style="font-size: 14px; margin-right: 20px;color: red" @click="dissolution">解除队伍</a>
							<section v-if="isMulti && isLeader" class="invite-btn"  @click="addNewUser">
								<img src="./images/icons/add.png" alt="">
								参赛选手
							</section>
						</section>
					</section>
					<form class="form layui-form" @submit.prevent>
						<section class="layui-form-item">
							<label class="label">
							<span class="label-text">
								<span class="required">*</span>
									参赛选手
								</span>
								<span class="input-wrapper layui-input-block">
									<input autocomplete="off" readonly v-model="leader.phone" type="text" placeholder="请输入正确的手机号">
								</span>
							</label>
							<section class="user-info">
								{{ leader.name }} {{ leader.schoolName }}
							</section>
						</section>
						<template v-if="isMulti">
							<section
								class="layui-form-item"
								v-for="(userItem, index) in userList"
								:key="user.id"
							>
								<section class="label">
									<section class="label-text">
										<span class="required">*</span>
										参赛选手
									</section>
									<section class="input-wrapper layui-input-block">
										<input autocomplete="off" :readonly="userItem.isInTeam || userItem.isInvited" lay-verify="phone" v-model="userItem.phone" @blur="getUserInfo(userItem)" type="text" placeholder="请输入正确的手机号">
									</section>
									<template v-if="isLeader">
										<section v-if="userItem.isInTeam" class="invite-btn">
											<a class="danger" href="javascript:;" @click="removeUser(userItem, index)">移除队伍</a>
										</section>
										<section v-else class="invite-btn">
											<a  href="javascript:;" @click="inviteUser(userItem, index, false)">{{ userItem.isInvited ? '取消邀请' : '邀请'}}</a>
											<a v-if="!userItem.isInvited" class="danger" href="javascript:;" @click="deleteUser(userItem, index)">删除</a>
										</section>
									</template>
								</section>
								<section class="user-info">
									{{ userItem.name }} {{ userItem.school }}
								</section>
							</section>
						</template>
						<section class="layui-form-item">
							<label class="label">
								<span class="label-text">
									（选填）指导教师
								</span>
								<span class="input-wrapper layui-input-block">
									<input autocomplete="off" :readonly="teacher.isInTeam || teacher.isInvited || !isLeader" v-model="teacher.phone" type="text" placeholder="请输入导师手机号" @blur="getUserInfo(teacher)">
								</span>
								<section v-if="teacher.isInTeam" class="invite-btn">
									<a class="danger" href="javascript:;" @click="removeUser(user, index, isTeacher)">移除队伍</a>
								</section>
								<section v-else class="invite-btn">
									<a  href="javascript:;" @click="inviteUser(teacher, -1, true)">{{ teacher.isInvited ? '取消邀请' : '邀请'}}</a>
								</section>
							</label>
							<section class="user-info">
								{{ teacher.name }} {{ teacher.school }}
							</section>
						</section>
						<button ref="gameUser" style="display: none" type="submit" lay-submit="" lay-filter="gameUser"></button>
					</form>
				</section>
				<section v-show="currStep === 3" class="step-item step-success">
					<img src="./images/icons/success.png" alt="">
					<section class="title">组队申请成功</section>
					<section class="text">
						审核结果会以网站消息的形式通知到您
					</section>
					<a class="login" href="./index.html">返回首页</a>
				</section>
				<section class="step-btn">
					<a v-if="currStep > 1 && currStep < 3" class="btn prev-btn" href="javascript:;" @click="prev">修改团队</a>
					<template v-if="currStep < 3">
						<a v-if="currStep === 1" class="btn" href="javascript:;" @click="next">创建团队</a>
						<a v-else class="btn" href="javascript:;" @click="next">{{ isMulti ? '全部选手确认参赛后提交组队信息' : '提交组队信息' }}</a>
					</template>
				</section>
				<seciton v-if="currStep === 2 && isMulti" class="tips-text">
					邀请队员后可关闭本页面，再次登录点击“组队报名”进入本界面。
				</seciton>
			</section>
		</section>
		<transition name="fade">
			<section v-if="inviteSuccessModal" class="invite-modal">
				<img src="./images/icons/success.png" alt="">
				<section class="text">{{ cancelText }}</section>
			</section>
		</transition>
		<section class="footer">版权所有62016中国电子学会普及工作委员会京JCP备120-41980号</section>
	</section>
</section>
<script src="./js/jquery.min.js"></script>
<script src="./lib/layui/layui.js"></script>
<script src="./js/vue.min.js"></script>
<script src="../js/abkj/fun_tool.js"></script>
<script src="../js/abkj/slAjax.js"></script>
<script src="../js/abkj/match/api/webinfo.js"></script>
<script src="../js/abkj/match/api/zone.js"></script>
<script src="../js/abkj/ext/login.js"></script>
<script src="../js/abkj/ext/matchExt.js"></script>
<script src="../js/abkj/match/api/tmatch.js"></script>
<script src="../js/abkj/ext/signExt.js"></script>
<script src="../js/abkj/match/api/grade.js"></script>
<script src="../js/abkj/ext/news.js"></script>
<script src="./js/vue.min.js"></script>
<script src="./js/common.js"></script>
<script src="./components/index.js"></script>
<script>
	$(function () {
		var tool = fun_tool()
		var vm = new Vue({
			el: '.wrapper',
			data: {
				isMulti: false, //是否是多人组队
				inviteSuccessModal: false,
				currStep: 1, //当前tab
				form: null,
				teamInfo: null,
				leader: {},//队长
				matchId: tool.getUrlParam('id'),
				cancelText: '',
				teacher: {
					phone: '',
					name: '',
					isInvited: false,
					isInTeam: false,
					school: ''
				},
				user: getUserInfo(),
				showModal: true,
				zoneList: [],
				currZoneList: [],
				currGradeList: [],
				gradeList: [],
				userList: [
					// {id: 1, phoneNumber: 18899999999, userName: '周杰伦', school: '北京大学', isInTeam: true, isInvited: true},
					// {id: 2, phoneNumber: 18899999999, userName: '黄家驹', school: '北京大学', isInTeam: false, isInvited: false},
					// {id: 2, phoneNumber: 18899999999, userName: '黄家驹', school: '北京大学', isInTeam: false, isInvited: true},
				]
			},
			computed: {
				isLeader: function () {
					return this.leader.id === this.user.id
				}
			},
			mounted: function () {
				var vm = this
				backToLogin()
				layui.use('layer')
				getMatchEntiry(tool.getUrlParam('id'), function (data) {
					vm.currZoneList = data.zoneList || []
					vm.currGradeList = data.gradeList || []
					// 赛区列表
					ZonequeryList({}, function (data) {
						vm.zoneList = data
						vm.zoneList = vm.zoneList.filter(function (item) {
							return vm.currZoneList.indexOf(item.id) !== -1
						})
					}, function () {})
					// 组别列表
					GradequeryList({}, function (data) {
						vm.gradeList = data
						vm.gradeList = vm.gradeList.filter(function (item) {
							return vm.currGradeList.indexOf(item.id) !== -1
						})
					}, function () {})
				}, function (err) {})
				// 获取赛程信息， 判断是多人还是单人
				TmatchgetObj(vm.matchId, function (data) {
					vm.isMulti = data.multiplayer === 1
				}, function (err, msg) {
				})
				layui.use(['form'], function () {
					vm.form = layui.form
					vm.layer = layui.layer
					getTeamInfo(vm.matchId, function (data) {
						// 如果有组队信息，进行赋值
						if (data.teamInfo && data.teamInfo.matchId == vm.matchId) {
							vm.leader = data.teamList.filter(function (item) {
								return item.roleType === 2
							}).map(function (item) {
								item.id = item.userId
								item.name = item.memberName || ''
								item.school = item.schoolName || ''
								return item
							})[0] || {}
							if (vm.leader.id !== vm.user.id) return
							if (data.teamInfo.state !== 0 && data.teamInfo.state !== 4) return vm.currStep = 3
							if (data.teamInfo.state === 4) return vm.teamInfo = {}
							vm.teamInfo = data.teamInfo
							vm.form.val('areaForm', {
								gameArea: data.teamInfo.zoneId,
								gameType: data.teamInfo.groupId,
								teamName: data.teamInfo.teamName
							})
							// 通过teamList进行过滤到队员信息

							vm.userList = data.teamList.filter(function (item) {
								// roleType === 0 学生
								return  item.roleType === 0
							}).map(function (item) {
								item.isInTeam = item.state === 1 //根据state判断是否已经在队伍中
								item.isInvited = true
								item.name = item.memberName || ''
								item.school = item.schoolName || ''
								return item
							})
							// 通过teamList进行过滤获取到教师信息
							vm.teacher = data.teamList.filter(function (item) {
								// roleType === 1 教师
								return item.roleType === 1
							}).map(function (item) {
								item.isInTeam = item.state === 1
								item.isInvited = true
								item.name = item.memberName || ''
								item.school = item.schoolName || ''
								return item
							})[0] || vm.teacher
							// 步骤到第二步
							vm.currStep = 2
						}
					}, function (err, msg) {
						layui.layer.msg(msg, {icon: 5})
					})
					// 创建团队
					vm.form.on('submit(chooseGameArea)', function (data) {
						var query = {
							userId: vm.user.id,
							matchId: vm.matchId,
							zoneId: data.field.gameArea,
							gradeId: data.field.gameType,
							teamName: data.field.teamName
						}
						signup(query, function (data) {
							getTeamInfo(vm.matchId, function (data) {
								vm.teamInfo = $.extend(vm.teamInfo, query, data.teamInfo)
								vm.currStep ++
								vm.leader = vm.user
							})
						}, function (err, msg) {
							layui.layer.msmultiplayerg(msg, {icon: 5})
						})
					})
					// 确认参赛
					vm.form.on('submit(gameUser)', function (data) {
						if (vm.userList.filter(function (user) {return user.phone !== vm.user.phone}).length === 0 && vm.isMulti) return layui.layer.msg('至少需要邀请一名队友', {icon: 5})
						if (vm.userList.filter(function (user) {return !user.isInTeam}).length > 0 && vm.isMulti) return layui.layer.msg('队伍中有未确认参赛的的选手', {icon: 5})
						if (vm.teacher.phone && !vm.teacher.isInTeam) return layui.layer.msg('指导老师未确认参赛', {icon: 5})
						submit(null, function () {
							layer.msg('提交组队成功！', {icon: 1})
							setTimeout(function () {
								vm.currStep++
							}, 3000)
						}, function (err, msg) {
							layui.layer.msg(msg, {icon: 5})
						})
					})
				})
			},
			methods: {
				// 获取用户信息
				getUserInfo: function (user) {
					if (user.isInvited || user.isInTeam) return
					if (!user.phone.trim()) return user.userName = user.school = user.id = ''
					// if (!this.checkUserPhone(user.phone)) return layer.msg('请输入正确的手机号', {icon: 5})
					if (user.phone === this.user.phone) {
						user.phone = ''
						return layer.msg('不能邀请自己', {icon: 5})
					}
					// getNameAndSchool(user.phone, function (userInfo) {
					// 	user.name = userInfo.name
					// 	user.school = userInfo.school
					// }, function () {
					// 	layer.msg('该选手不存在', {icon: 5})
					// 	user.name = user.school = user.phone = ''
					// })
				},
				dissolution: function () {
					var vm = this
					this.$confirm({
						title: '确认解除吗',
						success: function () {
							dismiss(function () {
								layer.msg('解除成功', {icon: 1})
								setTimeout(function () {
									location.href = 'game-details.html?id=' + vm.matchId
								})
							}, function () {
								layer.msg('解除失败', {icon: 5})
							})
						}
					})

				},
				// 邀请或者取消邀请
				inviteUser: function (user, index, isTeacher) {
					if (!user.phone.trim()) return
					
					if (user.phone === this.user.phone) return layer.msg('不能邀请自己', {icon: 5})
					var vm = this
					// 已经被邀请了，直接走取消邀请的方法
					if (user.isInvited) return this.removeUser(user, index, isTeacher)
					var paths = location.pathname.split('/')
					var url = paths[1] + '/' + paths[2]
					invate({
						signupId: vm.teamInfo.id,
						isTeacher: isTeacher,
						phone: user.phone,
						url: location.origin + '/' + url + '/join.html?id=' + vm.teamInfo.id
					}, function () {
						user.isInvited = !user.isInvited
						vm.inviteSuccessModal = true
						vm.cancelText = user.isInvited ? '邀请成功' : '取消邀请成功'
						setTimeout(function () {
							vm.inviteSuccessModal = false
						}, 300)
					}, function () {

					})

				},
				deleteUser: function (user, index) {
					this.userList.splice(index, 1)
				},
				// 取消邀请，移除队伍
				removeUser: function (user, index, isTeacher) {
					var vm = this
					var title = user.isInTeam ? '移除队伍' : '取消邀请'
					this.$confirm({
						title: '确认' + title + '吗？',
						success: function () {
							if (user.isInvited) {
								vm.inviteSuccessModal = true
								remove(user.phone, function () {
									user.isInvited = !user.isInvited
									vm.cancelText = title + '成功'
									vm.inviteSuccessModal = true
									if (!isTeacher) {
										vm.userList.splice(index, 1)
									} else {
										user.phone = ''
										user.name = ''
										user.isInvited = false
										user.isInTeam = false
										user.school = ''
									}
									setTimeout(function () {
										vm.inviteSuccessModal = false
									}, 300)
								}, function () {
									vm.inviteSuccessModal = false
									layer.msg('邀请失败', {icon: 5})
								})
							}
						}
					})
				},
				prev: function () {
					this.currStep--
				},
				addNewUser: function () {
					if (this.userList.length === 2) return layer.msg('最多只能邀请2名选手', {icon: 5})
					this.userList.push({
						phone: '',
						name: '',
						school: '',
						isInvited: false
					})
				},
				next: function () {
					var vm = this
					if (this.currStep === 1) {
						this.$refs.gameArea.click()
					} else if (this.currStep === 2) {
						this.$refs.gameUser.click()
					} else {
						vm.currStep++
					}
				},
				checkUserPhone: function (phone) {
					return /^1[3|4|5|7|8][0-9]\d{8}$/.test(phone)
				},
				setStepItemClass: function (type) {
					if (type > this.currStep) return ''
					else if (type === this.currStep) return 'active'
					else return 'success'
				}
			}
		})
	})
</script>
</body>
</html>
